<template>
	<view style="margin-top: 20rpx;">
		<view class="section" v-for="item in list" :key="item.id">
			<u-card :show-foot="false" @click="bigImg(item)">
				<view class="" slot="body">
					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
						<view class="u-body-item-title u-line-2">{{item.text}}</view>
						<image  style="width: 240rpx;"
							:src="item.letter_url"
							mode="widthFix"></image>
					</view>
				</view>
			</u-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad(e) {
			console.log(JSON.parse(e.letter));
			this.list = JSON.parse(e.letter)
		},
		methods:{
			bigImg(e){
				uni.previewImage({
					urls:[e.letter_url]
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-flex{
		justify-content: space-between;
	}
		.u-card-wrap { 
			background-color: $u-bg-color;
			padding: 1px;
		}
		
		.u-body-item {
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 10rpx;
		}
			
		.u-body-item image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-left: 12rpx;
		}
</style>